<template>
    <div class="recommends">
        <div v-for="(item, index) in recommends" :key="index">
            <h2 class="title">{{item.title}}</h2>
            <div class="pick-week">
                <div v-for="(goods, index2) in item.goods" :key="index2">
                    <img :src="goods.goodsImg[0].url" alt="" class="show-img">
                    <div class="txt">{{goods.name}}</div>
                    <div class="txt">{{goods.describe}}</div>
                    <div>{{goods.price}}</div>
                    <div class="btn" @click="goDetail(goods)">立即抢购</div>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    import {sendwithget} from "../../../network/profile";

    export default {
        name: "PickWeek",
        data() {
            return {
                recommends: []
            }
        },
        created() {
            sendwithget({
                url: '/getWeek',
            }).then(res=> {
                this.recommends = res.data.recommends
            })
        },
        methods: {
            goDetail(goods) {
                this.$router.push({path: '/detail', query: {
                    goodsId: goods._id
                    }})
            }
        }
    }
</script>

<style scoped>
    .recommends {
        text-align: center;
        background-color: #F1F1F1;
    }
    .title {
        padding-top: 30px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
    }
    .show-img {
        -webkit-box-reflect:below 1px -webkit-linear-gradient(transparent,transparent 80%,rgba(0,0,0,.2));
        width: 300px;
        height: 300px;
    }
    .pick-week {
        font-weight: 700;
        padding: 40px;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        width: 1200px;
        margin: 0 auto;
        line-height: 1.5em;

    }
    .pick-week > div {
        width: 300px;
        margin: 20px 10px;
    }
    .txt {
        width: 300px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .btn {
        color: #ffffff;
        margin: 10px auto;
        cursor: pointer;
        border-radius: 10px;
        width: 120px;
        height: 2em;
        line-height: 2em;
        background-color: var(--main-color);
    }
</style>